﻿@model SimpleTaskManager.Domain.Entities.ReportHeader

@{
    ViewBag.Title = "Upload Report";
}

<h2>UploadReport</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("UploadReport", "Task", FormMethod.Post, new { id = ViewBag.TaskId, enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Report</legend>
            <input type="hidden" id="taskid" value="@ViewBag.TaskId" />
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            <label for="file">Files</label>
        </div>
        <div class="editor-field">
            <input name="file" id="file-to-upload" type="file" />
            @Html.ValidationMessage("File")
        </div>
        <div class="progress-bar"></div>

        <p style="clear: both;">
            <input type="submit" id="upload-files" value="Upload" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Reports", new { id = ViewBag.TaskId })
</div>

<script type="text/javascript">
    $(function () {
        //is the file api available in this browser
        //only override *if* available.
        if (new XMLHttpRequest().upload) {
            $("#upload-files").click(function () {
                //upload files using the api
                //The files property is available from the
                //input DOM object
                upload_file($("#file-to-upload").file);
                return false;
            });
        }
    });

    //accepts the input.files parameter
    function upload_files(filelist) {
        if (typeof filelist !== "undefined") {
            for (var i = 0, l = filelist.length; i < l; i++) {
                upload_file(filelist[i]);
            }
        }
    }

    //each file upload produces a unique POST
    function upload_file(file) {
        xhr = new XMLHttpRequest();

        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                //update the progress bar
                $(".progress-bar").css({
                    width: (evt.loaded / evt.total) * 100 + "%"
                });
            }
        }, false);

        // File uploaded
        xhr.addEventListener("load", function () {
            $(".progress-bar").html("Uploaded");
            $(".progress-bar").css({ backgroundColor: "#fff" });
        }, false);

        xhr.open("post", "task/uploadreport/" + $("#taskid").valueOf(), true);

        // Set appropriate headers
        // We're going to use these in the UploadFile method
        // To determine what is being uploaded.
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);
        // Send the file
        xhr.send(file);
    }

</script>
